<template>
    <div class="wrap">
        <!--1. 轮播图-->
        <!--

        https://console-docs.apipost.cn/preview/95557aaa36cd1e24/efea1bbf4de6102c

        -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">

            <van-swipe-item v-for="ele in bannerList">
                <van-image
                        width="100%"
                        :src="ele.imageUrl"
                />
            </van-swipe-item>

        </van-swipe>
        <!--
        2. 选项卡
        -->
        <van-tabs v-model="active" @click="selectCateHandler">
            <van-tab :title="ele.title" v-for="ele in cateList">
                <div v-for="news in newsList" @click="goDetail(news)">
                    <ul class="news-detail-item">
                        <li class="left">
                            <h2>{{ news.title }}</h2>
                            <p>
                                <van-icon name="eye-o"/>
                                {{ news.viewCount | formatViewCount }} 阅读
                            </p>
                            <p><i class="fa fa-calendar" aria-hidden="true"></i>{{ news.createTime | formatTime }}</p>
                        </li>
                        <li class="right">
                            <img :src="'https://yw.52kfw.cn' + news.imageUrl" alt="">
                        </li>

                    </ul>
                </div>

            </van-tab>
        </van-tabs>

    </div>
</template>

<script>
    import axios from 'axios';
    import moment from 'moment';

    export default {
        name: "News",
        data() {
            return {
                active: 0,
                bannerList: [],
                cateList: [],
                newsList: [],

                cateId: -1,
            };
        },
        watch: {
            cateList(newVal) {
                console.log(newVal, '咨询分类改变了');
                this.cateId = newVal[0].title;
                this.getNewsListByCateId();
            }
        },
        created() {
            this.getBanners();
            this.getCateList();
        },
        filters: {

        },
        methods: {
            goDetail(news) {
                console.log(news);
                // 点击可以前往新闻详情页面
                this.$router.push('/detail?id=' + news._id);
            },
            selectCateHandler(index, cateId) {
                this.cateId = cateId;
                this.getNewsListByCateId();
            },

            async getBanners() {
                let url = `https://yw.52kfw.cn/api/v1/banner/bypos?id=6268bce29114094ca0ed2354`;
                let res = await axios.get(url);
                this.bannerList = res.data.data.info.banners;
            },
            async getCateList() {
                let url = `https://yw.52kfw.cn/api/cate/flist`;
                let res = await axios.get(url);
                console.log(res);
                this.cateList = res.data.data.list;
            },
            async getNewsListByCateId() {
                //根据cateId去分类列表接口
                let url = `https://yw.52kfw.cn/api/news/flist?pageSize=10&cate_id=${this.cateId}&currentPage=1`
                let res = await axios.get(url);
                this.newsList = res.data.data.list;
            }
        }
    }
</script>

<style scoped lang="less">
    .wrap {
        margin-bottom: 50px;
    }

    .news-detail-item {
        display: flex;
        border-bottom: 1px solid #e4e4e4;
        padding: 0.3rem;
        justify-content: space-between;

        .left {
            margin-right: 0.6rem;

            > h2 {
                -webkit-box-sizing: border-box;
                font-size: .42rem;
                line-height: 1.2;
                color: #1a1a1a;
                font-weight: normal;

                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;

            }

            > p {
                padding: 0.1rem 0;
                font-size: 0.24rem;
                color: #949494;
            }

        }

        .right {
            > .van-button {
                &:first-child {
                    margin-right: 0.1rem;
                }
            }

            img {
                width: 2rem;
                height: auto;
            }

        }
    }
</style>
